<script>
	let statusBarHeight;
	//#ifdef H5
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
	import wxshare from "../../utils/index.js";
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
	//  #endif

	export default {
		data() {
			return {
				/* 页面栈 */
				currentPage: [],
				/* 数据列表 */
				details: {},
				userInfo: uni.getStorageSync("Pduser"),
				/* 请求数据 */
				id: "",
				disclaimers: "",

				/* 展示信息编号的提示展示状态 */
				showTips: false,
				fileList: [],
			};
		},
		computed: {
			setHaderBar() {
				return `padding-top: ${statusBarHeight}px;`;
			},
			setPageContent() {
				return `height: calc(100% - ${statusBarHeight}px - 88rpx);`;
			},
		},
		onLoad(option) {
			this.currentPage = getCurrentPages();
			if (option.id) {
				this.id = option.id;
			}
			this.getDetails();
			this.Disclaimers();
			/* #ifdef H5 */
			this.prohibitShare();
			/* #endif */
		},
		onShow() {},
		onShareAppMessage: function(res) {
			let that = this;
			// console.log(that.imgUrl + that.data.logo);
			if (res.from === "menu") {
				// 来自页面内分享按钮
			}
			return {
				title: that.details.title,
				path: "/pages_recruitMoney/organizationRecruit/details?id=" + that.id,
				desc: "找房就用帮帮同城",
				imageUrl: that.details.image,
			};
		},
		onShareTimeline: function(res) {
			let that = this;
			return {
				title: that.details.title,
				path: "/pages_recruitMoney/organizationRecruit/details?id=" + that.id,
				imageUrl: that.details.image,
			};
		},
		methods: {
			share() {
				this.$myRequest
					.post("/api/mobile/vehicleOwner/helpingFriendsCircleforward", {
						circleId: this.id,
						userId: this.userInfo.id,
					})
					.then((res) => {});
			},
			fn() {
				let that = this;
				uni.showActionSheet({
					itemList: ["分享到微信好友", "分享到微信朋友圈"],
					success: (res) => {
						this.share();
						let wsxcene = null;
						if (res.tapIndex == 0) {
							//分享到好友 可以发送小程序
							wsxcene = "WXSceneSession";
							uni.share({
								provider: "weixin",
								scene: wsxcene,
								type: 5,
								title: that.details.title || "",
								imageUrl: that.details.image || "",
								miniProgram: {
									id: "gh_c8b17811efca",
									path: "pages_recruitMoney/organizationRecruit/details?id=" + that.id,
									type: 0,
									webUrl: "https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/organizationRecruit/details?id=" +
										that.id,
								},
								summary: "我正在看，" + this.details.title + "赶紧跟我一起来查看！",
								success: function(res) {
									console.log("success:" + JSON.stringify(res));
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
								},
							});
						} else {
							uni.downloadFile({
								url: that.details.image || "", //仅为示例，并非真实的资源
								success: (res) => {
									if (res.statusCode === 200) {
										let name = res.tempFilePath.substr(
											res.tempFilePath.lastIndexOf("/") + 1
										); //截取文件名
										plus.zip.compressImage({
												src: res.tempFilePath, //下载完图片的临时路径
												dst: "_doc/photoData/" + name, //存储压缩完图片的临时路径
												overwrite: true, //再次压缩会覆盖掉上次的目录
												width: "150px", //缩放图片的宽度
												height: "100px", //缩放图片的高度
												quality: 5, //压缩图片质量,值越低,图片占内存越低
											},
											(event) => {
												//压缩成功
												wsxcene = "WXSceneTimeline"; //分享到朋友圈 只能H5 或者图片
												uni.share({
													provider: "weixin",
													scene: wsxcene,
													type: 0,
													title: that.details.title || "",
													href: "https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/organizationRecruit/details?id=" +
														that.id,
													imageUrl: event.target,
													summary: "我正在看，" + that.details.title ||
														"" + "赶紧跟我一起来查看！",
													success: function(res) {
														console.log("success:" + JSON.stringify(res));
													},
													fail: function(err) {
														console.log("fail:" + JSON.stringify(err));
													},
												});
											},
											(error) => {
												//压缩失败
												uni.showToast({
													title: "压缩失败",
													icon: "none",
												});
											}
										);
									}
								},
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			backClick() {
				if (this.currentPage.length >= 2) {
					uni.navigateBack({
						delta: 1,
					});
				} else {
					uni.switchTab({
						url: "/pages/index/index",
					});
				}
			},

			ViewImagefm(index) {
				uni.previewImage({
					urls: this.fileList,
					current: index,
				});
			},
			likeClick() {
				console.log("点赞");

				if (!this.userInfo.phone) {
					uni.showModal({
						title: "",
						content: "尚未登录，前往登录？",
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								//#ifdef H5
								uni.navigateTo({
									url: "/pages/login/login?isNeedBack=true",
								});
								//#endif
								//#ifdef APP-PLUS
								uni.navigateTo({
									url: "/pages/login/login?isNeedBack=true",
								});
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: "/pages/login/phoneLogin",
								});
								//#endif
							}
						},
					});
					return;
				}
				let that = this;
				this.$myRequest
					.post("/api/mobile/public/favoriteFollowOrCancelFavoriteFollow", {
						collectorId: this.userInfo.id,
						collectionType: 10,
						relationId: this.id,
						id: this.details.isCollector != 0 ? this.details.isCollector : "",
					})
					.then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true,
						});
						this.getDetails();
					});
			},
			async fileClick() {
				// console.log('点击文件');
				// #ifdef H5
				window.open(this.details.filePath);
				// #endif
				// #ifndef H5
				try {
					uni.showLoading({
						title: "下载中",
					});
					const res = await uni.downloadFile({
						url: this.details.filePath,
					});
					if (res.length) {
						res.forEach((el) => {
							if (el == null) return false;
							if (el.errMsg == "downloadFile:ok") {
								uni.saveFile({
									tempFilePath: el.tempFilePath,
									success: function(res) {
										console.log(444444);
										var savedFilePath = res.savedFilePath;
										uni.hideLoading();
										uni.showToast({
											title: "下载成功！文件位置：" + res.savedFilePath,
											icon: "none",
											mask: true,
										});
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											},
										});
									},
								});
							}
						});
					} else {
						uni.hideLoading();
					}
					if (res.statusCode !== 200) throw Error("接口异常。");
					// const name = res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/')+1); //截取文件名
				} catch (err) {}
				// #endif
				return;
				// #ifdef APP
				uni.showLoading({
					title: "正在下载",
				});
				let downFileName = this.details.filePath.split("/")[
					this.details.filePath.split("/").length - 1
				];
				// 本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，
				// 这时用户文件管理器能看到的了，之后创建 帮帮同城 作为文件夹，
				// 后缀是用于文件命名和格式修改，大家可以使用变量。
				var url = this.details.filePath;
				let dtask = plus.downloader.createDownload(
					url, {
						filename: "file://storage/emulated/0/帮帮同城/" +
							downFileName +
							"." +
							this.details.remarks, //利用保存路径，实现下载文件的重命名
					},
					(d, status) => {
						//d为下载的文件对象
						if (status == 200) {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								mask: true,
								title: "已保存到文件夹：/帮帮同城/" + downFileName + "." + this.details.remarks, //保存路径
								duration: 3000,
							});
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							setTimeout(() => {
								plus.runtime.openFile(d.filename); //选择软件打开文件
							}, 1500);
						} else {
							//下载失败
							uni.hideLoading();
							plus.downloader.clear(); //清除下载任务
							uni.showToast({
								icon: "none",
								mask: true,
								title: "下载失败，请稍后重试",
							});
						}
					}
				);
				dtask.start();
				// #endif
			},
			preview(item, index) {
				let type = "";
				let str = item.split(".").slice(-1);
				if (str == "pdf") {
					type = "2";
					str += ".pdf";
				} else {
					this.ViewImagefm(index);
					return;
				}
				uni.navigateTo({
					url: "/pages_recruitMoney/organizationRecruit/preview?src=" + item + "&type=" + type,
				});
			},
			async prohibitShare() {
				const param = window.location.href.split("#")[0];
				const res = await uni.request({
					method: "post",
					data: {
						url: param,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
				});
				if (!res.data) {
					return false;
				}
				wxshare.config({
					debug: false, //是否打开调试
					appId: res.data.appId, // 公众号的唯一标识
					timestamp: res.data.timestamp, // 生成签名的时间戳
					nonceStr: res.data.nonce, // ，生成签名的随机串
					signature: res.data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},

			// onPullDownRefresh() {
			//     setTimeout(()=>{
			//         uni.stopPullDownRefresh();
			//     }, 1200)
			// },
			async getDetails() {
				let postData = {
					id: this.id,
				};
				if (this.userInfo && this.userInfo.id && this.userInfo.id != 'undefined') {
					postData.userId = this.userInfo.id
				}
				//this.userInfo.id && (postData.userId = this.userInfo.id);
				const res = await this.$myRequest.get(
					"/api/mobile/personnelOwner/getOrganRecruitDetail",
					postData
				);
				if (!res.organRecruit) {
					throw Error("数据异常");
				}
				this.details = res.organRecruit;
				this.fileList = res.organRecruit.filePath.split("|");
			},

			// 免责声明
			Disclaimers() {
				this.$myRequest
					.get("/api/mobile/public/getDisclaimersByDisclaimerLocation", {
						disclaimerLocation: "18",
					})
					.then((res) => {
						this.disclaimers = res.Disclaimers.disclaimerContent;
					});
			},
			// itemClick(e) {
			//     uni.navigateTo({
			//         url: `/pages_recruitMoney/organizationRecruit/details?id=${e.id}`
			//     });
			// }
		},
	};
</script>

<template>
	<view class="page">
		<view class="header-box" :style="setHaderBar">
			<view class="header-content">
				<image class="back" v-if="currentPage.length >= 2" @click="backClick"
					src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
				<image class="back" v-else @click="backClick"
					src="https://pic.bangbangtongcheng.com/273355a6b7cd4bcb8b4cf8baf9a4ad9a"></image>
				<view class="title"> 公招信息 </view>
			</view>
		</view>
		<view class="page-content" :style="setPageContent">
			<scroll-view class="scroll-view" scroll-y>
				<view class="info-number_inco-box">
					<view class="info-number" @click="showTips = !showTips">
						信息编号：{{ details.id || "获取中" }}

						<view class="tips" v-show="showTips">
							<view class="binds_1">
								信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。
							</view>
							<view class="binds_2"> 联系发布人时可通过信息编号确认信息。 </view>
						</view>
					</view>
					<view class="icons">
						<image v-if="details.isCollector == 0||!details.isCollector" class="icon love"
							src="https://pic.bangbangtongcheng.com/icon/guanzhu02.png" @click="likeClick">
						</image>
						<image v-if="details.isCollector != 0&&details.isCollector" class="icon love"
							src="https://pic.bangbangtongcheng.com/icon/guanzhu03.png" @click="likeClick">
						</image>
						<!-- #ifdef MP-WEIXIN -->

						<button class="wx_btn" open-type="share">
							<image class="icon share" src="https://pic.bangbangtongcheng.com/icon/share.png">
							</image>
						</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<image class="icon share" src="https://pic.bangbangtongcheng.com/icon/share.png" @click="fn">
						</image>
						<!-- #endif -->
					</view>
				</view>
				<view class="content-title">
					{{ details.title || "获取中" }}
				</view>
				<!-- <view class="banner-image">
					<image class="image" :src="details.image" mode="widthFix"> </image>
				</view> -->
				<view class="text">
					<mp-html :content="details.content"></mp-html>
				</view>
				<view class="annex">
					附件：
					<view @click="preview(item, index)" v-for="(item, index) in fileList" :key="index">{{ item }}
					</view>
					<!-- <text class="download" @click.stop="fileClick">下载</text> -->
				</view>
				<view class="statement_time">
					{{ details.publisher }}
					<br />
					{{ (details.updateDate && details.updateDate.split(" ")[0]) || "" }}
				</view>
				<view class="disclaimers">
					{{ disclaimers }}
				</view>
			</scroll-view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<style lang="less" scoped>
	.page {
		--color-white: #fff;
		height: 100vh;
		background-color: var(--color-white);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		color: #333333;

		.header {
			&-box {
				// box-sizing: content-box;
				width: 100%;
				background-color: #69b6a8;
			}

			&-content {
				height: 88rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&::after {
					content: "";
					width: 40rpx;
					height: 40rpx;
				}

				.back {
					width: 40rpx;
					height: 40rpx;
				}

				.title {
					font-size: 36rpx;
					color: var(--color-white);
				}
			}
		}

		.page-content {
			padding: 0 30rpx 40rpx;

			.scroll-view {
				height: 100%;
			}

			.info-number_inco-box {
				color: #64b6a8;
				line-height: 34rpx;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon {
					width: 56rpx;
					height: 56rpx;
					margin-right: 60rpx;

					&:last-child {
						margin-right: 0;
					}
				}

				// .share{
				//     width: 48rpx;
				//     height: 48rpx;
				// }
			}

			.content-title,
			.banner-image,
			.text,
			.annex,
			.statement_time {
				margin-bottom: 20rpx;

				.download {
					color: blue;
					margin-left: 20rpx;
					display: inline-block;
				}
			}

			.content-title {
				font-size: 32rpx;
				line-height: 45rpx;
			}

			.banner-image {
				width: 100%;

				.image {
					border-radius: 24rpx;
					width: 100%;
					background-color: gray;
				}
			}

			.text {
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.annex {
				font-size: 28rpx;
				color: #64b6a8;
				line-height: 50rpx;
				word-wrap: break-word;
			}

			.statement_time {
				font-size: 28rpx;
				color: #999999;
				line-height: 50rpx;
				text-align: right;
			}

			.disclaimers {
				font-size: 24rpx;
				color: #999999;
				padding-top: 60rpx;
			}

			.page-list {
				padding: 0 30rpx;

				.list-item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #e0e0e0;
					display: flex;
					height: 260rpx;

					.image {
						width: 260rpx;
						height: 200rpx;
						border-radius: 24rpx;
						background-color: gray;
					}

					.item-content {
						padding-left: 30rpx;
						display: flex;
						flex-flow: column nowrap;
						justify-content: space-between;
						height: 100%;
						width: calc(100% - 260rpx);

						.text {
							font-size: 32rpx;
							line-height: 45rpx;
						}

						.time {
							font-size: 28rpx;
							color: #999999;
							text-align: right;
							line-height: 39rpx;
						}
					}
				}

				.none {
					text-align: center;
				}
			}
		}
	}

	.info-number {
		position: relative;

		.tips {
			width: 500rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			position: absolute;
			bottom: -150rpx;
			border: 1px solid #888;
			left: 150rpx;
			z-index: 1;

			.binds_1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.binds_2 {
				font-size: 24rpx;
				font-weight: 400;
				color: #64b6a8;
			}

			&::before {
				width: 0px;
				height: 0px;
				position: absolute;
				padding: 0;
				border-left: 24rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 24rpx solid #fff;
				content: "";
				z-index: 12;
				position: absolute;
				left: 12rpx;
				top: -20rpx;
			}

			&::after {
				width: 0px;
				height: 0px;
				position: absolute;
				padding: 0;
				border-left: 24rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 24rpx solid #888;
				content: "";
				z-index: 10;
				position: absolute;
				left: 12rpx;
				top: -24rpx;
			}
		}
	}

	.wx_btn {
		padding: 0;
		margin: 0;
		background: transparent;
		display: inline-block;
		width: 56rpx;
		height: 56rpx;
	}

	.wx_btn::after {
		border: none;
	}
</style>